<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
import {  watch, computed } from "vue";
const props = defineProps(["content"]);
const style = computed(() => ({
  width: route.path == "/works/add" ? "100%" : props.content.style.with + "%",
  height:
    route.path == "/works/add" ? "100%" : props.content.style.height + "%",
  position: route.path != "/works/add" ? "absolute" : "",
  top: props.content.style.top,
  left: props.content.style.left,
}));
watch(
  () => props.content,
  (newValue) => {
    console.log(newValue);
  },
  {
    deep: true,
  }
);
</script>
<template>
  <video
    :class="props.content.etranceAnimation"
    :style="style"
    :src="props.content.url"
    loop
    muted
    autoplay
  />
</template>

<style lang="less" scoped></style>
